<template>
    <div class="back">
        <el-card class="login-card">
        <el-form ref="form" label-width="70px" :inline="true" :model="form" :rules="rules" class="login-container">
            <h3 class="login_title" >系统登录</h3>
            <el-form-item prop="username" label="用户名">
                <el-input v-model="form.username" pleaseholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password" label="密码">
                <el-input v-model="form.password" pleaseholder="请输入密码" type="password"></el-input>
            </el-form-item>
         <el-form-item class="login-button">
         <el-button type="primary" class="login-button" @click="submit">登录</el-button>
         </el-form-item>
        </el-form>
    </el-card>
    </div>
</template>
<script>
import  Mock  from 'mockjs';
import Cookie from 'js-cookie';
import {getMenu} from '../api'
export default {
    data() {
        return {
            form:{
                username:'',
                password:''
            },//定义校验规则
            rules:{
                username:[
                    {required:true,trigger:'blur',message:'请输入用户名'}
                ],
                password:[
                    {required:true,trigger:'blur',message:'请输入密码'}  
                ]
            }
        }
    },
    methods:{
        //登录
        submit(){
          //token信息
        // const token=Mock.Random.guid()
        //将token存入cookie用于不同页面之间的通信
        // Cookie.set('token',token)

        //校验通过
        this.$refs.form.validate((valid)=>{
            if(valid){
               getMenu(this.form).then(({data})=>{
                 console.log(data,'data');
                 if(data.code===20000){
                    this.$message.success(data.data.message)
                    Cookie.set('token',data.data.token)

                    //获取菜单的数据存入store中
                     
                     this.$store.commit('setMenu',data.data.menu)
                          //跳转到系统页面
                        this.$router.push('/home')
                 }
                 else{
                    this.$message.error(data.data.message)
                 }
               })
            }
        })
        }
    }
}
</script>

<style lang="less" scoped>
 .back{
background:url("../../images/p1.png");
width:100%;
height:100%;
position:fixed;
background-size:100% 100%;
}

.login-card{
    width: 340px;
    box-sizing: border-box;
    margin: 180px 1180px;
    background-color: rgba(0, 0, 0, 0.1);
    .el-input{
        width: 198px;
    }
    .login-container{
    width: 300px;
    .login_title{
        text-align: center;
        color: #999;
        margin-bottom: 20px;
    }
    .login-button{
        text-align: center;
        margin-left: 50px;
    }
}
}

</style>